<template>
  <div class="absolute inset-0 z-mask"
       @click.stop>
    <div class="z-loading absolute">
      <div class="z-loading-primary absolute">
        <span class="z-loading-primary--mask"></span>
      </div>
      <div class="z-loading-gray absolute">
        <span class="z-loading-gray--mask"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlockLoading'
}
</script>

<style lang="scss" scoped>
.z-mask {
  background-color: hsla(0, 0%, 100%, 0.4);
  z-index: 2000;
  transition: all 200ms;
}
.z-loading {
  height: 4px;
  left: 0;
  overflow: hidden;
  top: 0;
  width: 100%;
  background-color: #17b3a3;

  &-primary {
    animation: animation-translate-primary 2s infinite linear;
    height: 100%;
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    transition: none;
    &--mask {
      background-color: #e0e0e0;
      height: 100%;
      position: absolute;
      width: 100%;
      animation: animation-scale-primary 2s infinite linear;
    }
  }

  &-gray {
    height: 100%;
    position: absolute;
    width: 100%;
    transition: none;
    animation: animation-translate-gray 2s infinite linear;
    transform-origin: top left;
    &--mask {
      background-color: #e0e0e0;
      height: 100%;
      position: absolute;
      width: 100%;
      animation: animation-scale-gray 2s infinite linear;
    }
  }
}

@keyframes animation-translate-primary {
  0% {
    transform: translateX(-145.166611%);
  }
  20% {
    transform: translateX(-145.166611%);
    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
  }
  59.15% {
    transform: translateX(-61.495191%);
    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
  }
  100% {
    transform: translateX(55.444446%);
  }
}
@keyframes animation-translate-gray {
  0% {
    transform: translateX(-54.888891%);
    animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
  }
  25% {
    transform: translateX(-17.236978%);
    animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
  }
  48.35% {
    transform: translateX(29.497274%);
    animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
  }
  100% {
    transform: translateX(105.388891%);
  }
}
@keyframes animation-scale-gray {
  0% {
    transform: scaleX(0.08);
    animation-timing-function: cubic-bezier(
      0.205028,
      0.057051,
      0.57661,
      0.453971
    );
  }
  19.15% {
    transform: scaleX(0.457104);
    animation-timing-function: cubic-bezier(
      0.152313,
      0.196432,
      0.648374,
      1.004315
    );
  }
  44.15% {
    transform: scaleX(0.72796);
    animation-timing-function: cubic-bezier(
      0.257759,
      0.003163,
      0.211762,
      1.38179
    );
  }
  100% {
    transform: scaleX(0.08);
  }
}
@keyframes animation-scale-primary {
  0% {
    transform: scaleX(0.08);
  }
  36.65% {
    transform: scaleX(0.08);
    animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
  }
  69.15% {
    transform: scaleX(0.661479);
    animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
  }
  100% {
    transform: scaleX(0.08);
  }
}
</style>